import { DoubleLeftOutlined } from '@ant-design/icons';
import { Collapse, Input, Select } from 'antd';
import { useState } from 'react';
import IconFont from '@/components/IconFont';
import Style from '../../index.module.less';
import { useFilterFieldsConfig } from '../../store';
import FieldWrapper from '../FieldWrapper';
import ExcludeTagModal from '../TagModal/exclude';
import IncludeTagModal from '../TagModal/include';
import { TagLabel } from '../../../../../common/bizcomponents/TagLabel';
import {labelItem, orderTypeFilterItem} from '@/pages/OrderModule/orderList/components/Filter/constant.js';


const { Panel } = Collapse;
const { Option } = Select;

/**
 * @desc: 筛选框：标签/旗帜组件
 */
export const Label = ({ value = {}, onChange, onPressEnter }) => {
  const { checkingMap } = useFilterFieldsConfig();

  const [includeTagModalVisible, setIncludeTagModalVisible] = useState(false);
  const [excludeTagModalVisible, setExcludeTagModalVisible] = useState(false);
  const [includeTagText, setIncludeTagText] = useState('');
  const [excludeTagText, setExcludeTagText] = useState('');

  const flagOptions = [
    { name: "无旗帜", label: '无旗帜', value: 0 },
    { name: "red", label: '红旗帜', value: 1 },
    { name: "yellow", label: '黄旗帜', value: 2 },
    { name: "green", label: '绿旗帜', value: 3 },
    { name: "blue", label: '蓝旗帜', value: 4 },
    { name: "purple", label: '紫旗帜', value: 5 },
  ];

  const triggerChange = (changedValue) => {
    console.log('changedValue:', { ...value, ...changedValue });
    onChange?.({ ...value, ...changedValue });
  };

  const handleIncludeTagChange = (value) => {
    const { includeTagText: text, ...data } = value;
    setIncludeTagText(text);
    triggerChange(data);
  };

  const handleIncludeTagInput = (e) => {
    const { value: input } = e.target;
    if(input) {
      setIncludeTagModalVisible(true)
    }else {
      const { includeTagText: text, ...data } = value;
      data.containLabelIdArr = [];
      setIncludeTagText('');
      triggerChange(data);
    }
  }

  const handleETagInput = (e) => {
    const { value: input } = e.target;
    if(input) {
      setExcludeTagModalVisible(true)
    }else {
      const { excludeTagText: text, ...data } = value;
      data.excludeLabelIdArr = [];
      setExcludeTagText('');
      triggerChange(data);
    }
  }

  const handleExcludeTagChange = (value) => {
    const { excludeTagText: text, ...data } = value;
    setExcludeTagText(text);
    triggerChange(data);
  };
  if(Object.values(labelItem).every(item => checkingMap[item] === false)) {
    return <div style={{marginBottom: -6}}/>
  }
  return (
    <>
      <Collapse
        bordered={false}
        defaultActiveKey={['label']}
        expandIcon={({ isActive }) => <DoubleLeftOutlined rotate={isActive ? 270 : 90} style={{ fontSize: '16px', color: '#4E5969' }} />}
        expandIconPosition="end"
        className={Style['filter-item-collapse']}
      >
        <Panel header="标签/旗帜" key="label" className={Style['filter-item-collapse-panel']}>
          {/** 包含标签 */}
          {checkingMap.containLabelIdArr && (
            <FieldWrapper>
              <Input value={includeTagText} placeholder="选择包含标签" onClick={() => setIncludeTagModalVisible(true)} allowClear onChange={e=>!e.target.value && handleIncludeTagChange({containLabelIdArr: []})} onPressEnter={onPressEnter}></Input>
              <IncludeTagModal value={value} visible={includeTagModalVisible} onVisibleChange={setIncludeTagModalVisible} onChange={handleIncludeTagChange} />
            </FieldWrapper>
          )}

          {/** 排除标签 */}
          {checkingMap.excludeLabelIdArr && (
            <FieldWrapper>
              <Input value={excludeTagText} placeholder="选择排除标签" onClick={() => setExcludeTagModalVisible(true)} allowClear onChange={e=>!e.target.value && handleExcludeTagChange({excludeLabelIdArr: []})} onPressEnter={onPressEnter}></Input>
              <ExcludeTagModal value={value} visible={excludeTagModalVisible} onVisibleChange={setExcludeTagModalVisible} onChange={handleExcludeTagChange} />
            </FieldWrapper>
          )}

          {/** 包含旗帜 */}
          {checkingMap.containFlagArr && (
            <FieldWrapper>
              <Select
                size='middle'
                value={value.containFlagArr}
                mode="multiple"
                placeholder="选择包含旗帜"
                allowClear
                onChange={(value) => triggerChange({ containFlagArr: value })}
                clearIcon={<IconFont type="iconguanbi2fill" style={{fontSize:'14px'}} />}
              >
                {flagOptions.map(item => (
                  <Option value={item.value} key={item.value} label={item.label}>
                    <TagLabel type={'flag'} key={item.name} name={item.name}></TagLabel>
                  </Option>
                ))}
              </Select>
            </FieldWrapper>
          )}

          {/** 排除旗帜 */}
          {checkingMap.excludeFlagArr && (
            <FieldWrapper>
              <Select
                size='middle'
                value={value.excludeFlagArr}
                mode="multiple"
                placeholder="选择排除旗帜"
                allowClear
                onChange={(value) => triggerChange({ excludeFlagArr: value })}
                clearIcon={<IconFont type="iconguanbi2fill" style={{fontSize:'14px'}} />}
              >
                {flagOptions.map(item => (
                  <Option value={item.value} key={item.value} label={item.label}>
                    <TagLabel type={'flag'} key={item.name} name={item.name}></TagLabel>
                  </Option>
                ))}
              </Select>
            </FieldWrapper>
          )}
        </Panel>
      </Collapse>
    </>
  );
};

export default Label;
